<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>确认订单</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta name="renderer" content="webkit">
		<meta name="baidu-site-verification" content="R9XA5lWxu2"/>
		<meta name="author" content="图腾">
		<meta name="keywords" content="图腾">
		<meta name="description" content="图腾">
		<link rel="stylesheet" href="<%=basePath%>plugins/swiper/css/swiper.min.css">
		<link rel="stylesheet" href="<%=basePath%>css/ys.css">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>css/css.css" />
		<style>
			.pic{
				width: 70px;
				height: 70px;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;
			}
			.pic img{
				width: 100%;
				height: 100%;
			}
			.line{
				display: inline-block;
				vertical-align: middle;
			}
			.line-t-b{
				border-top: 1px solid #E5E5E5;
				border-bottom: 1px solid #E5E5E5;
				padding: 40px;
			}
			table tr td{width: 33.3%;}
			.input_style{padding-left: 8px;}
		</style>
		<script src="<%=basePath%>js/jquery.min.js"></script>
		<script src="<%=basePath%>js/check.js"></script>
		<script type="text/javascript">
			var subFlag = true;
			var ps;
			$(function() {
				var region = $("#region");
				var address = $("#address");
				var number_this = $("#number_this");
				var name = $("#name_");
				var phone = $("#phone");

				$("#sub_setID").click(function() {
					/*var flag = true;
					var input_out = $(".input_style");
					for (var i = 0; i <= input_out.length; i++) {
						if ($(input_out[i]).val() == "") {
							$(input_out[i]).css("border", "1px solid red");
							return flag = false;
						} else {
							$(input_out[i]).css("border", "1px solid #cccccc");
						}
					}
					getAreaId($("#expressForm"), $("#areaId"));
					if(!$("#areaId").val()){
						alert("请选择省市区");
						return;
					}*/
					if(!check()) return;
					$(this).prop("disabled", true);
					$.post("<%=basePath%>user/newExpress", $("#expressForm").serialize(), function (res) {
						if(res.code == 1){
							window.location.reload();
						}else{
							alert(res.message);
							$("#sub_setID").prop("disabled", false);
						}
					});
				});

				var success = false;
				$(".btn_closing").click(function () {
					if(success){ <%--支付成功，不重复下单--%>
						shade_content_show(1);
						return;
					}
					<c:if test="${loginUser == null}">
						$(".js-login").click();
						return;
					</c:if>
					if(!$("#expressId").val()){
						onclick_open();
						return;
					}
					if(subFlag){
						$(this).html("请稍等...");
						subFlag = false;
						$.post("<%=basePath%>order/newOrder", $("#orderForm").serialize(), function (res) {
							if(res.code == 1){
								if(res.data.payStatus != 1) {
									//跳转到微信二维码支付页面
									$("#payQr").html("<img src='<%=basePath%>order/wxPayCode?codeUrl=" + res.data.codeUrl + "' />");
									shade_content_show(1);
									<%--验证支付状态--%>
									ps = window.setInterval(function () {
										$.post("<%=basePath%>order/getOrderPayStatus", {orderId: res.data.orderId}, function (res) {
											if (res.code == 1 && res.data.ps) {
												success = true;
												$("#content").html("<div style='font-size: 28px; color: #5cb85c;'>已支付成功，我们会尽快给您发货！</div>");
												window.clearInterval(ps);
											}
										});
									}, 3000);
								}else{
									shade_content_show(1);
									$("#content").html("<div style='font-size: 28px; color: #5cb85c;'>购买成功，我们会尽快给您发货！</div>");
								}
							}else{
								subFlag = true;
								alert(res.message);
								$(this).html("微信支付");
							}
						});
					}
				});

				var span_momey = $(".span_momey");
				var b = 0;
				for (var i = 0; i < span_momey.length; i++) {
					b += parseFloat($(span_momey[i]).html());
				}
				var out_momey = $(".out_momey");
				out_momey.html(b);
				$(".shade_content").hide();
				$(".shade").hide();
				$('.nav_mini ul li').hover(function() {
					$(this).find('.two_nav').show(100);
				}, function() {
					$(this).find('.two_nav').hide(100);
				})
				$('.left_nav').hover(function() {
					$(this).find('.nav_mini').show(100);
				}, function() {
					$(this).find('.nav_mini').hide(100);
				})
				$('#jia').click(function() {
					$('input[name=num]').val(parseInt($('input[name=num]').val()) + 1);
				})
				$('#jian').click(function() {
					$('input[name=num]').val(parseInt($('input[name=num]').val()) - 1);
				})
				$('.Caddress .add_mi').click(function() {
					$(this).css('background', 'url("<%=basePath%>images/mail_1.jpg") no-repeat').siblings('.add_mi').css('background', 'url("<%=basePath%>images/mail.jpg") no-repeat')
					$("#expressId").val($(this).data("express-id"));
				});
			});
			var x = Array();

			function func(a, b) {
				x[b] = a.html();
				alert(x)
				a.css('border', '2px solid #f00').siblings('.min_mx').css('border', '2px solid #ccc');
			}

			function onclick_close(index) {
				var shade_content = $(".shade_content").eq(index);
				var shade = $(".shade");
				//if (confirm("确认关闭么！此操作不可恢复")) {
					shade_content.hide();
					shade.hide();
				//}
			}
			function shade_content_show(index) {
				$(".shade_content").eq(index).show();
				$(".shade").show();
			}

			function onclick_open(expressId) {
				shade_content_show(0);

				var input_out = $(".input_style");
				$("#expressId_").val("");
				for (var i = 0; i <= input_out.length; i++) {
					if ($(input_out[i]).val() != "") {
						$(input_out[i]).val("");
					}
				}
				if(expressId) {
					$.post("<%=basePath%>order/getExpress", {expressId: expressId}, function (res) {
						if (res.code == 1) {
							var express = res.data;
							$("#expressId_").val(express.expressInfo.expressId);
							$("#name_").val(express.expressInfo.name);
							$("#phone").val(express.expressInfo.mobile);
							$("#address").val(express.expressInfo.address);
							if(express.defaultValList){
								console.log(express.defaultValList)
								$(".input-ld").ld({ajaxOptions : {"url" : "<%=basePath%>area/getAreaListByParentId"},defaultParentId :'root',texts : JSON.parse(express.defaultValList)});
							}
						} else {
							alert(res.message);
						}
					});
				}
			}

			function delClick(expressId){
				if(window.confirm("确认删除吗？")){
					$.post("<%=basePath%>order/deleteExpress", {expressId: expressId}, function (res) {
						if(res.code == 1){
							window.location.reload();
						}else{
							alert(res.message);
						}
					});
				}
			}

			function onclick_remove(r) {
				if (confirm("确认删除么！此操作不可恢复")) {
					var out_momey = $(".out_momey");
					var input_val = $(r).parent().prev().children().eq(1).val();
					var span_html = $(r).parent().prev().prev().children().html();
					var out_add = parseFloat(input_val).toFixed(2) * parseFloat(span_html).toFixed(2);
					var reduce = parseFloat(out_momey.html()).toFixed(2)- parseFloat(out_add).toFixed(2);
					console.log(parseFloat(reduce).toFixed(2));
					out_momey.text(parseFloat(reduce).toFixed(2))
					$(r).parent().parent().remove();
				}
			}

			function onclick_btnAdd(a) {
				var out_momey = $(".out_momey");
				var input_ = $(a).prev();
				var input_val = $(a).prev().val();
				var input_add = parseInt(input_val) + 1;
				input_.val(input_add);
				var btn_momey = parseFloat($(a).parent().next().find(".span_momey").html());
				var out_momey_float = parseFloat(out_momey.html()) + btn_momey;
				out_momey.text(out_momey_float.toFixed(2));
			}

			function onclick_reduce(b) {
				var out_momey = $(".out_momey");
				var input_ = $(b).next();
				var input_val = $(b).next().val();
				if (input_val <= 1) {
					alert("商品个数不能小于1！")
				} else {
					var input_add = parseInt(input_val) - 1;
					input_.val(input_add);
					var btn_momey = parseFloat($(b).parent().next().find(".span_momey").html());
					var out_momey_float = parseFloat(out_momey.html()) - btn_momey;
					out_momey.text(out_momey_float.toFixed(2));
				}
			}
		</script>
	</head>

	<body>

	<jsp:include page="${basePath}/common.jsp" />
	<!--
            描述：shade 遮罩层
        -->
	<div class="shade">
	</div>

	<div class="container">

	<form id="orderForm">
		<div class="Caddress" style="padding-top: 60px;">
			<div class="open_new">
				<button type="button" class="open_btn" onclick="javascript:onclick_open();">使用新地址</button>
			</div>
			<c:forEach var="express" items="${expressList}">
			<c:if test="${express.defaultFlag==1}">
			<input type="hidden" id="expressId" name="expressId" value="${express.expressId}" />
			<div class="add_mi" style="margin: 10px;  background: url('<%=basePath%>images/mail_1.jpg') no-repeat;" data-express-id="${express.expressId}">
			</c:if>
			<c:if test="${express.defaultFlag!=1}">
			<div class="add_mi" style="margin: 10px;" data-express-id="${express.expressId}">
			</c:if>
				<div style="border-bottom:1px dashed #ccc;line-height:28px;">${express.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" style="color: #007aff; text-decoration: underline;" onclick="onclick_open(${express.expressId})"><span>编辑</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" style="color: #007aff; text-decoration: underline;" onclick="delClick(${express.expressId})"><span>删除</span></a></div>
				<p>${express.mobile}<br/>${express.areaName}${express.address}</p>
			</div>
			</c:forEach>
		</div>
		<div style="clear: both"></div>
		<br/><br/>
		<!--
			描述：商品内容
		-->
		<div class="shopping_content">
			<div class="shopping_table like-box">
				<input type="hidden" name="activityId" value="${activityInfo.activityId}" />
				<table border="0" bordercolor="#cccccc" cellspacing="0" cellpadding="0" class="line-t-b" style="width: 100%; text-align: center;">
					<tr>
						<td style="padding-bottom: 20px; text-align: left; padding-left: 128px">确认订单信息</td>
					</tr>
					<tr>
						<td>
							<div class="pic line">
								<a target="_blank" href="/activity/getActivityDetails/${activityInfo.activityId}"><img src="${activityInfo.activityPic}" /></a>
							</div>
							<div class="line" style="line-height: 3; padding-left: 13px;">
								<div style="font-weight: bold"><a style="color: black" target="_blank" href="/activity/getActivityDetails/${activityInfo.activityId}">${activityInfo.activityName}</a></div>
								<div style="color: #7d7d7d; font-weight: bold">${activityInfo.activityTitle}</div>
							</div>
						</td>
						<td>
							<button type="button" class="btn_reduce" onclick="javascript:onclick_reduce(this);">-</button>
							<input class="momey_input" type="text" name="itemCount" id="" value="1" readonly />
							<button type="button" class="btn_add" onclick="javascript:onclick_btnAdd(this);">+</button>
						</td>
						<td>
							<%--<span style="color: red;">￥ <fmt:formatNumber value="${activityInfo.activityPrice}" pattern="#,#00.00#"/></span>--%>
								<span style="color: red;">￥ <span class="span_momey">${activityInfo.activityPrice}</span></span>
						</td>
					</tr>
				</table>
				<div class="" style="width: 100%; text-align: right; margin-top: 20px;">
					<div style="font-size: 18px;">
						<span style="color: #7d7d7d">实际支付金额：</span><span style="font-weight: bold">￥ <span class="out_momey">${activityInfo.activityPrice}</span></span>
					</div>
					<br/>
					<button type="button" class="btn_closing">微信支付</button>
				</div>
			</div>
		</div>
	</form>


	<!--
        描述：shade_content
    -->
	<div class="shade_content" style="z-index: 1000">
		<div class="col-xs-12 shade_colse">
			<button type="button" onclick="javascript:onclick_close(0);">x</button>
		</div>
		<div class="nav shade_content_div">
			<div class="col-xs-12 shade_title">
				新增收货地址
			</div>
			<div class="col-xs-12 shade_from">
				<form method="post" id="expressForm">
					<div class="col-xs-12">
						<input type="hidden" name="expressId" id="expressId_" />
						<input class="input_style" type="" name="name" id="name_" value="" placeholder="收货人姓名" />
					</div>

					<div class="col-xs-12">
						<input class="input_style" type="" name="mobile" id="phone" value="" placeholder="收货人电话" />
					</div>
					<div class="col-xs-12">
						<select name="province" class="input-ld" style="width: 90px; border: 1px solid #CCCCCC; height: 30px;">
							<option value="">请选择省</option>
						</select>
						<select name="city" class="input-ld" style="width: 80px; border: 1px solid #CCCCCC; height: 30px;">
							<option value="">请选择市</option>
						</select>
						<select name="district" class="input-ld" style="width: 80px; border: 1px solid #CCCCCC; height: 30px;">
							<option value="">请选择区</option>
						</select>
						<input type="hidden" id="areaId" name="areaId" />
					</div>
					<div class="col-xs-12">
						<input class="input_style" type="" name="address" id="address" value="" placeholder="详细地址（街道、地区、门牌号）" />
					</div>
					<%--<div class="col-xs-12">
						<div style="width: 325px; text-align: right;">
							<input type="radio" name="defaultFlag" id="def_" value="1" /> <label for="def_">设置为默认收货地址</label>
						</div>
					</div>--%>
					<div class="col-xs-12">
						<%--<input class="btn_remove" type="button" id="" onclick="javascript:onclick_close();" value="取消" />--%>
						<input type="button" class="sub_set" id="sub_setID" value="提交" />
					</div>
				</form>
			</div>
		</div>
	</div>

	<div class="shade_content" style="z-index: 1000">
		<div class="col-xs-12 shade_colse">
			<button type="button" onclick="javascript:onclick_close(1);$('.btn_closing').html('微信支付');subFlag=true;window.clearInterval(ps);">x</button>
		</div>
		<div class="nav shade_content_div" id="content">
			<div>请您尽快支付，支付后会尽快给您发货</div>
			<div class="col-xs-12 shade_from" id="payQr">

			</div>
		</div>
	</div>

	</div>
		<!-- 底部结束 -->
	<jsp:include page="${basePath}/footer.jsp" />

	<script src="<%=basePath%>js/jquery.min.js"></script>
	<script src="<%=basePath%>plugins/swiper/js/swiper.min.js"></script>
	<script src="<%=basePath%>js/modal_build.js"></script>
	<script src="<%=basePath%>js/modal_index.js"></script>
	<script src="<%=basePath%>js/jquery.ld.js"></script>
	<script src="<%=basePath%>js/areaAdd.js"></script>
	<script>
		document.documentElement.style.fontSize = 200 / 1920 * document.documentElement.clientWidth + 'px';
		window.onresize = function () {
			document.documentElement.style.fontSize = 200 / 1920 * document.documentElement.clientWidth + 'px';
		};

		$(function () {
			$(".input-ld").ld({ajaxOptions : {"url" : "<%=basePath%>area/getAreaListByParentId"},defaultParentId :'root',texts : []});
		});
	</script>

	</body>

</html>